<template>
    <div class="dashboard">
        <v-header></v-header>
        <center-map></center-map>
        <div class="one hBox vh-content-between">
            <div @mouseover="offsetOver" @mouseout="offsetOut" class="left vBox vh-content-start vh-items-center">
                <div>行管部门分析</div>
                <div class="hBox vh-content-start vh-items-center">
                    <div>{{departmentTotal}}</div>
                    <div>部门总执行次数</div>
                </div>
                <div class="check-total">{{DepartmentCheckTotal}} 检查总数</div>
                <div class="rotate-box">
                    <circle-offset :id="circleOffsetId" v-if="departmentArr.length>0" :data="departmentArr"
                                   :defaultIndex="departmentIndex"
                                   @offset-click="offsetClick"></circle-offset>
                </div>
                <div class="vBox vh-items-center">
                    <div class="hBox top">
                        <div class="circle">
                            <circle-big-small ref="leftCircle"
                                              v-if="departmentArr[departmentIndex] && series0Data.length>0"
                                              :data="departmentArr[departmentIndex]"
                                              id="leftCircleBigSmall"></circle-big-small>
                        </div>
                        <div class="finish">
                            <div>已完成 {{departmentArr[departmentIndex] ?departmentArr[departmentIndex].Complete : 0}}
                            </div>
                            <div>待完成 {{departmentArr[departmentIndex]?departmentArr[departmentIndex].Nocomplete :0}}
                            </div>
                        </div>
                    </div>
                    <div class="check-total">
                        {{departmentArr[departmentIndex]?departmentArr[departmentIndex].BookEntChecknum :0}} 检查总数
                    </div>
                    <div style="flex: 1;width: 100%">
                        <check-bar :series0Data="series0DataLeft" :series1Data="series1DataLeft"
                                   :series2Data="series2DataLeft"></check-bar>
                    </div>
                </div>
            </div>
            <div @mouseover="rotateOver" @mouseout="rotateOut" class="right vBox vh-content-start vh-items-center">
                <div>区域分析
                </div>
                <div class="hBox vh-content-start vh-items-center">
                    <div>{{streetTotal}}</div>
                    <div>区域总执行次数</div>
                </div>
                <div class="check-total">{{StreetCheckTotal}} 检查总数</div>
                <div class="rotate-box">
                    <circle-rotate :id="circleRotateId" v-if="streetArr.length>0" :data="streetArr"
                                   :defaultIndex="streetIndex"
                                   @rotate-click="rotateClick"></circle-rotate>
                </div>
                <div class="vBox vh-items-center">
                    <div class="hBox top">
                        <div class="circle">
                            <circle-big-small ref="rightCircle" v-if="streetArr[streetIndex] && series0Data.length>0"
                                              :data="streetArr[streetIndex]"
                                              id="rightCircleBigSmall"
                            ></circle-big-small>
                        </div>
                        <div class="finish">
                            <div>已完成 {{streetArr[streetIndex] ?streetArr[streetIndex].Complete : 0}}</div>
                            <div>待完成 {{streetArr[streetIndex]?streetArr[streetIndex].Nocomplete :0}}</div>
                        </div>
                    </div>
                    <div class="check-total">{{streetArr[streetIndex]?streetArr[streetIndex].BookEntChecknum
                        :0}} 检查总数
                    </div>
                    <div style="flex: 1;width: 100%">
                        <check-bar :borderRadius="[20,20,0,0]" :series0Data="series0Data" :series1Data="series1Data"
                                   :series2Data="series2Data"></check-bar>
                    </div>
                </div>

            </div>
        </div>
        <div class="two hBox vh-content-between">
            <div class="two-1 vBox">
                <div>动态风险分析</div>
                <div style="flex: 1;width: 100%;position: relative">
                    <bar-complex :data="topEightData"></bar-complex>
                    <el-date-picker
                            v-model="value2"
                            :clearable="false"
                            type="month"
                            style="position: absolute;top:5%;right:5%"
                            :picker-options="pickerOptions"
                            format="yyyy年MM月"
                            value-format="yyyy-MM"
                            @change="dateChange"
                            placeholder="选择月">
                    </el-date-picker>
                </div>
            </div>
            <div class="two-2 vBox">
                <div>企业管控分析</div>
                <div style="flex: 1;width: 100%" class="hBox vh-content-between ">
                    <div style="width: 48%" class="table-box emphasis-attention-company3">
                        <el-table
                                :data="tableData3"
                                class="company-table font-size-small"
                                :header-cell-style="{backgroundColor:'#0847A1 !important',color:'white'}"
                                :row-class-name="tableRowClassName0"
                                @cell-mouse-enter="enterTable3"
                                @cell-mouse-leave="leaveTable3"
                        >
                            <el-table-column
                                    prop="EntName"
                                    show-overflow-tooltip
                                    label="企业名称"
                                    min-width="2">
                            </el-table-column>
                            <el-table-column
                                    prop="EntScore"
                                    label="得分"
                                    align="center"
                                    min-width="2">
                                <template v-slot="props">
                                    <div v-if="props.row.RiskLevel==='重大风险'" class="icon">
                                        <div>{{props.row.RiskLevel}}</div>
                                        <div style="background: rgba(234, 71, 71, 1);"></div>
                                    </div>
                                    <div v-if="props.row.RiskLevel==='较大风险'" class="icon">
                                        <div>{{props.row.RiskLevel}}</div>
                                        <div style="background: rgba(255,121,58,1)"></div>
                                    </div>
                                    <div v-if="props.row.RiskLevel==='一般风险'" class="icon">
                                        <div>{{props.row.RiskLevel}}</div>
                                        <div style="background: rgba(255,211,31,1)"></div>
                                    </div>
                                    <div v-if="props.row.RiskLevel==='低风险'" class="icon">
                                        <div>{{props.row.RiskLevel}}</div>
                                        <div style="background: rgba(19,114,255,1)"></div>
                                    </div>
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                    <div style="width: 48%" class="table-box emphasis-attention-company4">
                        <el-table
                                :data="tableData4"
                                class="company-table font-size-small"
                                :header-cell-style="{backgroundColor:'#0847A1 !important',color:'white'}"
                                :row-class-name="tableRowClassName1"
                                @cell-mouse-enter="enterTable4"
                                @cell-mouse-leave="leaveTable4"
                        >
                            <el-table-column
                                    prop="EntName"
                                    show-overflow-tooltip
                                    label="企业名称"
                                    min-width="2">
                            </el-table-column>
                            <el-table-column
                                    prop="EntScore"
                                    label="得分"
                                    align="center"
                                    min-width="2">
                                <template v-slot="props">
                                    <div v-if="props.row.RiskLevel==='重大风险'" class="icon">
                                        <div>{{props.row.RiskLevel}}</div>
                                        <div style="background: rgba(234, 71, 71, 1);"></div>
                                    </div>
                                    <div v-if="props.row.RiskLevel==='较大风险'" class="icon">
                                        <div>{{props.row.RiskLevel}}</div>
                                        <div style="background: rgba(255,121,58,1)"></div>
                                    </div>
                                    <div v-if="props.row.RiskLevel==='一般风险'" class="icon">
                                        <div>{{props.row.RiskLevel}}</div>
                                        <div style="background: rgba(255,211,31,1)"></div>
                                    </div>
                                    <div v-if="props.row.RiskLevel==='低风险'" class="icon">
                                        <div>{{props.row.RiskLevel}}</div>
                                        <div style="background: rgba(19,114,255,1)"></div>
                                    </div>
                                </template>

                            </el-table-column>
                        </el-table>
                    </div>
                </div>
            </div>
            <div class="two-3 vBox">
                <div>事故趋势分析</div>
                <div style="flex: 1;width: 100%">
                    <accident-analysis :data="accidentData"></accident-analysis>
                </div>
            </div>
        </div>
        <!--<div class="map">-->
        <!--<div class="county-box">-->
        <!--<div v-for="(item,index) in mapMarkers" :class="'map-'+item.class" :key="item.name+item.total+index"-->
        <!--@mouseover="hoverIndex=index" @mouseout="hoverIndex=-1">-->
        <!--<img :src="item.src" alt/>-->
        <!--</div>-->
        <!--</div>-->

        <!--</div>-->
    </div>
</template>

<script>
import vHeader from "./header";
import centerMap from "./center-map";

import FirstMap from "../components/svgs/pie-bar-animation";
import mapMarker from "../components/svgs/pie-bar-animation";
import circleOffset from "../components/svgs/circle-offset";
import circleRotate from "../components/svgs/circle-rotate";
import circleBigSmall from "../components/svgs/circle-big-small";
import circleGradient from "../components/svgs/circle-gradient";
import checkBar from "../components/charts/check-bar";
import barComplex from "../components/charts/bar-complex";
import accidentAnalysis from "../components/charts/accident-analysis-line";


export default {
	components: {
		FirstMap,
		vHeader,
		mapMarker,
		circleOffset,
		circleRotate,
		circleBigSmall,
		circleGradient,
		checkBar,
		barComplex,
		accidentAnalysis,
		centerMap
	},
	data() {
		return {
			circleOffsetId: "circleOffset",
			circleRotateId: "circleRotate",
			isFullScreen: false,
			bdInfo:{},
			departmentTotal: 0,
			DepartmentCheckTotal: 0,
			StreetCheckTotal: 0,
			streetArr: [],
			streetIndex: 0,
			departmentArr: [],
			departmentIndex: 0,
			streetTotal: 0,
			chemicalType: 0,
			hoverIndex: -1,
			value2: new Date(),
			tableData3: [],
			tableData4: [],
			isMouseEnter3: false,
			isMouseEnter4: false,
			accidentData: [],
			topEightData: [],
			pickerOptions: {
				disabledDate(time) {
					return time.getTime() > new Date();
				}
			},
			series0DataLeft: [],
			series1DataLeft: [],
			series2DataLeft: [],
			series0Data: [],
			series1Data: [],
			series2Data: []
		};
	},
	computed: {},
	mounted() {
		let me = this;
		me._rollSetTime = setTimeout(() => {
			this.readyRoll();
		}, 2000);
		window.addEventListener("resize", me.firstResize);
		this.init();
	},
	destroyed() {
		let me = this;
		clearInterval(this._tableSetInterval3);
		clearInterval(this._tableSetInterval4);
		clearInterval(this._circleOffsetInterval);
		clearInterval(this._circleRotateInterval);
		clearInterval(this._circleOffsetOutInterval);
		clearInterval(this._circleRotateOutInterval);

		clearTimeout(this._rollSetTime);
		window.removeEventListener("resize", me.firstResize);
	},
	methods: {
		offsetOver() {
			clearInterval(this._circleOffsetInterval);
			clearInterval(this._circleOffsetOutInterval);
		},
		rotateOver() {
			clearInterval(this._circleRotateInterval);
			clearInterval(this._circleRotateOutInterval);
			console.log("clear-right");
		},
		offsetOut() {
			let me = this;
			this._circleOffsetOutInterval = setInterval(() => {
				let index = (this.departmentIndex + 1) % me.departmentArr.length;
				this.departmentIndex = index;
				let clickEvent = new Event("click");
				document.querySelector(`#${me.circleOffsetId}_path_${index}`).dispatchEvent(clickEvent);
				console.log("out-left");
			}, 5 * 1000);
		},
		rotateOut() {
			let me = this;
			this._circleRotateOutInterval = setInterval(() => {
				let index = (this.streetIndex + 1) % me.streetArr.length;
				this.streetIndex = index;
				let clickEvent = new Event("click");
				document.querySelector(`#${me.circleRotateId}_path_${index}`).dispatchEvent(clickEvent);
				console.log("out-right");
			}, 5 * 1000);
		},
		offsetClick(i) {
			this.departmentIndex = i;
			setTimeout(() => {
				this.$refs["leftCircle"].start();
			});
			let item0 = this.departmentArr[i].item0;
			let item1 = this.departmentArr[i].item1;
			let item2 = this.departmentArr[i].item2;
			let item3 = this.departmentArr[i].item3;
			this.series0DataLeft = [+item0.bookEntHTnum, +item1.bookEntHTnum, +item2.bookEntHTnum, +item3.bookEntHTnum];
			this.series1DataLeft = [+item0.bookTalknum, +item1.bookTalknum, +item2.bookTalknum, +item3.bookTalknum];
			this.series2DataLeft = [+item0.bookLawnum, +item1.bookLawnum, +item2.bookLawnum, +item3.bookLawnum];
		},
		rotateClick(i) {
			this.streetIndex = i;
			setTimeout(() => {
				this.$refs["rightCircle"].start();
			});
			let item0 = this.streetArr[i].item0;
			let item1 = this.streetArr[i].item1;
			let item2 = this.streetArr[i].item2;
			let item3 = this.streetArr[i].item3;
			this.series0Data = [+item0.bookEntHTnum, +item1.bookEntHTnum, +item2.bookEntHTnum, +item3.bookEntHTnum];
			this.series1Data = [+item0.bookTalknum, +item1.bookTalknum, +item2.bookTalknum, +item3.bookTalknum];
			this.series2Data = [+item0.bookLawnum, +item1.bookLawnum, +item2.bookLawnum, +item3.bookLawnum];
		},
		dateChange(e) {
			console.log(e);
			console.log(this.value2);
			this.getTopEight(e);
		},
		init() {
			this.getTopEight();
			this.getFive();
			this.getAccidentAnalysis();
			this.getDepartmentTotal();
			this.getStreetTotal();
			this.getStreet();
			this.getDepartment();
			this.getDepartmentCheck();
			this.getStreetCheck();
			this.rotate();
		},
		firstResize() {
			let me = this;
			me._tableSetInterval3=clearInterval(me._tableSetInterval3);
			me._tableSetInterval4 = clearInterval(me._tableSetInterval4);
			me._circleOffsetInterval = clearInterval(me._circleOffsetInterval);
			me._circleRotateInterval = clearInterval(me._circleRotateInterval);
			me._circleOffsetOutInterval = clearInterval(me._circleOffsetOutInterval);
			this._circleRotateOutInterval = clearInterval(this._circleRotateOutInterval);

			this.departmentIndex = Math.floor(this.departmentArr.length / 2);
			this.streetIndex = Math.floor(this.streetArr.length / 2);
			me._rollSetTime && clearTimeout(me._rollSetTime);
			me._rollSetTime = setTimeout(() => {
				me.readyRoll();
				me.rotate();
			}, 2000);
		},
		rotate() {
			let me = this;
			if (!this._circleOffsetOutInterval) {
				this._circleOffsetInterval = setInterval(() => {
					let index = (this.departmentIndex + 1) % me.departmentArr.length;
					this.departmentIndex = index;
					let clickEvent = new Event("click");
					document.querySelector(`#${me.circleOffsetId}_path_${index}`).dispatchEvent(clickEvent);
					console.log("left");
				}, 5 * 1000);

			}
			if (!this._circleRotateOutInterval) {
				this._circleRotateInterval = setInterval(() => {
					let index = (this.streetIndex + 1) % me.streetArr.length;
					this.streetIndex = index;
					let clickEvent = new Event("click");
					console.log("right");
					document.querySelector(`#${me.circleRotateId}_path_${index}`).dispatchEvent(clickEvent);
				}, 5 * 1000);
			}

		},

        getStreetCheck() {
			this.$req.get(this.$url.getStreetCheck).then((res) => {
				if (res.code === 0 && res.data[0] && res.data[0].StreetCheckTotal) {
					this.StreetCheckTotal = res.data[0].StreetCheckTotal || 0;
				}
				else {
					this.$message({
						message: "获取街道检查总数信息失败",
						type: "error",
						duration: 5 * 1000
					});
				}
			});
		},
		getDepartmentCheck() {
			this.$req.get(this.$url.getDepartmentCheck).then((res) => {
				if (res.code === 0 && res.data[0] && res.data[0]) {
					this.DepartmentCheckTotal = res.data[0].DepartmentCheckTotal || 0;
				}
				else {
					this.$message({
						message: "获取部门检查总数信息失败",
						type: "error",
						duration: 5 * 1000
					});
				}
			});
		},
		getDepartment() {
			this.$req.get(this.$url.getDepartment).then((res) => {
				if (res.code === 0) {
					this.departmentIndex = Math.floor(res.data.length / 2);
					// this.departmentTotal =res.data[0] ? res.data[0].CheckStandard : 0;
					this.departmentArr = res.data;
				}
				else {
					this.$message({
						message: "获取每个部门履职完成情况和执法、约谈、 检查情况信息失败",
						type: "error",
						duration: 5 * 1000
					});
				}
			});
		},
		getStreet() {
			this.$req.get(this.$url.getStreet).then((res) => {
				if (res.code === 0) {
					this.streetIndex = Math.floor(res.data.length / 2);
					// this.departmentTotal =res.data[0] ? res.data[0].CheckStandard : 0;
					this.streetArr = res.data;
				}
				else {
					this.$message({
						message: "获取街道履职完情况信息失败",
						type: "error",
						duration: 5 * 1000
					});
				}
			});
		},
		getDepartmentTotal() {
			this.$req.get(this.$url.getDepartmentTotal).then((res) => {
				if (res.code === 0) {
					this.departmentTotal = res.data[0] ? res.data[0].CheckStandard : 0;
				}
				else {
					this.$message({
						message: "部门总执行次数获取失败",
						type: "error",
						duration: 5 * 1000
					});
				}
			});
		},
		getStreetTotal() {
			this.$req.get(this.$url.getStreetTotal).then((res) => {
				if (res.code === 0) {
					this.streetTotal = res.data[0] ? res.data[0].CheckStandard : 0;
				}
				else {
					this.$message({
						message: "区域总执行次数获取失败",
						type: "error",
						duration: 5 * 1000
					});
				}
			});
		},
		getTopEight(time = null) {
			this.$req.get(this.$url.topEight, {Time: time}).then((res) => {
				if (res.code === 0) {
					this.topEightData = res.data;
				}
				else {
					this.$message({
						message: "动态风险分析数据获取失败",
						type: "error",
						duration: 5 * 1000
					});
				}
			});
		},
		getFive() {
			this.$req.get(this.$url.topFive).then((res) => {
				if (res.code === 0) {
					this.tableData3 = res.data;
				}
				else {
					this.$message({
						message: "企业管控分析数据获取失败",
						type: "error",
						duration: 5 * 1000
					});
				}
			});
			this.$req.get(this.$url.lastFive).then((res) => {
				if (res.code === 0) {
					this.tableData4 = res.data;
				}
				else {
					this.$message({
						message: "企业管控分析数据获取失败",
						type: "error",
						duration: 5 * 1000
					});
				}

			});
		},
		getAccidentAnalysis() {
			this.$req.get(this.$url.accidentAnalysis).then((res) => {
				if (res.code === 0) {
					this.accidentData = res.data;
				}
				else {
					this.$message({
						message: "事故趋势分析数据获取失败",
						type: "error",
						duration: 5 * 1000
					});
				}
			});
		},
		enterTable3() {
			this.isMouseEnter3 = true;
		},
		leaveTable3() {
			this.isMouseEnter3 = false;
		},
		enterTable4() {
			this.isMouseEnter4 = true;
		},
		leaveTable4() {
			this.isMouseEnter4 = false;
		},
		readyRoll() {
			this._trHeight = document.querySelector("div.emphasis-attention-company3 table  tbody  tr").offsetHeight;
			let bodyHeight = document.querySelector("div.emphasis-attention-company3").offsetHeight;

			this._containBoxStyle3 = document.querySelector("div.emphasis-attention-company3 div.el-table__body-wrapper.is-scrolling-none").style;
			this._containBoxStyle4 = document.querySelector("div.emphasis-attention-company4 div.el-table__body-wrapper.is-scrolling-none").style;

			if (this.tableData3.length * this._trHeight > bodyHeight) {
				this._containBoxStyle3.transform = `translate(0,-${this._trHeight * 2 + "px"})`;
				this._containBoxStyle3.paddingTop = this._trHeight * 2 + "px";
				this.beginRolling3();
			}
			if (this.tableData4.length * this._trHeight > bodyHeight) {
				this._containBoxStyle4.transform = `translate(0,-${this._trHeight * 2 + "px"})`;
				this._containBoxStyle4.paddingTop = this._trHeight * 2 + "px";
				this.beginRolling4();
			}
		},
		beginRolling3() {
			let me = this;
			this._tableSetInterval3 = setInterval(() => {
				if (!me.isMouseEnter3) {
					this.tableData3.push(this.tableData3[0], this.tableData3[1]);
					this._containBoxStyle3.transition = "all .5s";
					this._containBoxStyle3.paddingTop = this._trHeight + "px";

					setTimeout(() => {
						this._containBoxStyle3.transition = "all .5s";
						this._containBoxStyle3.paddingTop = 0;
					}, 2000);

					setTimeout(() => {
						this.tableData3.splice(0, 2);
						this._containBoxStyle3.transition = "all 0s ease 0s";
						this._containBoxStyle3.paddingTop = this._trHeight * 2 + "px";
					}, 2500);
				}
			}, 4000);
		},
		beginRolling4() {
			let me = this;
			this._tableSetInterval4 = setInterval(() => {
				if (!me.isMouseEnter4) {
					this.tableData4.push(this.tableData4[0], this.tableData4[1]);
					this._containBoxStyle4.transition = "all .5s";
					this._containBoxStyle4.paddingTop = this._trHeight + "px";

					setTimeout(() => {
						this._containBoxStyle4.transition = "all .5s";
						this._containBoxStyle4.paddingTop = 0;
					}, 2000);

					setTimeout(() => {
						this.tableData4.splice(0, 2);
						this._containBoxStyle4.transition = "all 0s ease 0s";
						this._containBoxStyle4.paddingTop = this._trHeight * 2 + "px";
					}, 2500);
				}
			}, 4000);
		},
		tableRowClassName0({rowIndex}) {
			if ((rowIndex + 1) % 2 === 0) {
				return "row-double0";
			}
			else {
				return "row-single";
			}
		},
		tableRowClassName1({rowIndex}) {
			if ((rowIndex + 1) % 2 === 0) {
				return "row-double1";
			}
			else {
				return "row-single";
			}
		},
		launchFullScreen(element) {
			if (element.requestFullscreen) {
				element.requestFullscreen();
			}
			else if (element.mozRequestFullScreen) {
				element.mozRequestFullScreen();
			}
			else if (element.webkitRequestFullscreen) {
				element.webkitRequestFullscreen();
			}
			else if (element.msRequestFullscreen) {
				element.msRequestFullscreen();
			}
		},
		exitFullScreen() {
			if (document.exitFullscreen) {
				document.exitFullScreen();
			}
			else if (document.webkitExitFullscreen) {
				document.webkitExitFullscreen();
			}
			else if (document.mozCancelFullScreen) {
				document.mozCancelFullScreen();
			}
			else if (document.msExitFullscreen) {
				document.msExitFullscreen();
			}
		}
	}
};
</script>

<style lang="scss">
    .dashboard {
        width: 100%;
        height: 100%;
        background: radial-gradient(rgba(0, 0, 0, 0), #050821);
        position: relative;

        .one {
            height: 736px;
            padding: 0 25px;
            position: absolute;
            top: 59px;
            width: 100%;
            .left, .right {
                width: 350px;
                .check-total {
                    width: 122px;
                    height: 26px;
                    line-height: 26px;
                    text-align: center;
                    background: linear-gradient(90deg, rgba(0, 76, 188, 1), rgba(0, 65, 191, 0));
                    font-weight: 400;
                    margin-top: 8px;
                }
                .rotate-box {
                    width: 290px;
                    height: 290px;
                    display: flex;
                }
                > div:first-child {
                    width: 373px;
                    height: 42px;
                    line-height: 42px;
                    transform: translate(11.5px, 0);
                    margin-bottom: 8px;
                    padding-left: 20px;
                    font-size: 16px;
                    font-weight: 400;
                    background: url("../assets/img/3.png") center / contain no-repeat;
                }
                > div:nth-child(2) {
                    width: 266px;
                    height: 42px;
                    line-height: 42px;
                    font-size: 16px;
                    font-weight: 400;
                    padding-top: 3px;
                    background: url("../assets/img/17.png") center / contain no-repeat;
                    > div:first-child {
                        width: 100px;
                        font-size: 36px;
                        font-family: BebasNeue;
                        text-align: left;
                        padding-left: 10px;
                        color: #ffffff;
                        letter-spacing: 0px;
                    }
                    > div:last-child {
                        height: 22px;
                        opacity: 0.8;
                        font-size: 16px;
                        font-family: PingFang;
                        font-weight: 400;
                        text-align: left;
                        color: #ffffff;
                        line-height: 22px;
                        letter-spacing: 1px;
                    }
                }
                > div:last-child {
                    width: 350px;
                    height: 308px;
                    background: url("../assets/img/25.png") bottom / contain no-repeat, url("../assets/img/11.png") center / contain no-repeat;
                    .top {
                        margin-top: 37px;
                        .circle {
                            width: 85px;
                            height: 85px;
                            display: flex;
                        }
                        .finish {
                            width: 181px;
                            height: 65px;
                            background: url("../assets/img/1.png") center / contain no-repeat;
                            > div {
                                height: 32px;
                                line-height: 32px;
                                padding-left: 38px;
                            }
                        }
                    }
                }
            }
        }
        .two {
            width: 100%;
            height: 285px;
            padding: 0 20px;
            position: absolute;
            bottom: 0;
            display: flex;
            justify-content: space-between;
            .two-1, .two-3 {
                width: 560px;
                > div:first-child {
                    font-size: 16px;
                    font-weight: 400;
                    text-align: left;
                    line-height: 42px;
                    letter-spacing: 1px;
                    padding-left: 20px;
                    width: 560px;
                    height: 42px;
                    background: url("../assets/img/14.png") center / contain no-repeat;

                }
            }
            .two-2 {
                flex: 1;
                margin: 0 40px;
                > div:first-child {
                    font-size: 16px;
                    font-weight: 400;
                    text-align: left;
                    line-height: 42px;
                    letter-spacing: 1px;
                    padding-left: 20px;
                    width: 100%;
                    height: 42px;
                    margin-bottom: 10px;
                    background: linear-gradient(90deg, rgba(0, 76, 188, 1), rgba(0, 65, 191, 0));
                }

                .table-box {
                    width: 100%;
                    height: 210px;
                    overflow: hidden;

                    .el-table::before {
                        background-color: transparent;
                    }

                    .el-table td, .el-table th.is-leaf {
                        border: none;
                    }

                    .el-table--enable-row-hover .el-table__body tr:hover > td {
                        background-color: transparent
                    }

                    .el-table__header-wrapper {
                        position: relative;
                        z-index: 100;
                        display: none;
                    }

                    .company-table {
                        background: transparent;

                        .row-double0 {
                            background-color: rgba(234, 71, 71, 0.2);
                            color: white;
                        }
                        .row-double1 {
                            background-color: rgba(0, 0, 0, 0.3);
                            color: white;
                        }
                        .row-single {
                            background-color: transparent;
                            color: white;
                        }
                        .icon {
                            display: flex;
                            align-items: center;
                            margin-left: 20px;
                            justify-content: flex-end;
                            > div:last-child {
                                width: 14px;
                                height: 14px;
                                border-radius: 50%;
                                margin-left: 10px;
                            }
                        }
                    }
                }
            }
        }
    }

</style>

